﻿<%@ page language="java" pageEncoding="utf-8"%>
<%@ page import="java.util.*"%>
<%@ page import="javax.servlet.http.HttpServletRequest"%>
<%@ page import="org.jbit.bean.*,org.jbit.biz.*,org.jbit.dao.*,org.jbit.vo.*"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>企业地图查看</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <!-- Bootstrap -->
    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
   
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery/jquery.jqGrid.min.js"></script>
    <link href="../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
    <script src="../lib/ligerUI/js/plugins/ligerTip.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function ()
        {
            $("#tree").ligerTree({ checkbox: false });
            
        });
    </script>  
<script type="text/javascript">
function MM_jumpMenuGo(objId,targ,restore){ //v9.0
  var selObj = null;  with (document) { 
  if (getElementById) selObj = getElementById(objId);
  if (selObj) eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0; }
}
$(document).ready(function(){
  $("#hide").click(function(){
  $(".header").hide();
  $(".col-md-2").hide();
  $("#footer").hide();
  });
  $("#show").click(function(){
  $("p").show();
  });
   });
    </script>
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=C29OafEY0zdSpGlDpWCQDlYf"></script>
</head>
<body>
<div class="container-fluid">
		<!--头部开始-->
<div class="header">
		<!--头部主题开始-->
<div class="navbar navbar-static-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
      <img src="../images/logo-m.png" height="34" class="img-rounded" >
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-brand pull-right">
      <form class="navbar-form navbar-left" role="search" method="post" name="ChooseInfoForm" action="listInfoSearch.jsp">
        <div class="form-group">
          <input name="ModuleMark" id="ModuleMark" type="text" class="form-control" placeholder="请输入GPS编号">
        </div>
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
      </form>
      <table  class="navbar-form navbar-left"><tr>
      <td><a href="../EnterpriseUser/person.jsp"> <button class="btn btn-default toggle" >个人中心</button></a></td>
      <td><a href="../EnterpriseUser/ShowMapEnterprise.jsp"><button class="btn btn-default toggle" >车辆追踪</button></a></td>
      <td><a href="../EnterpriseUser/listInfo.jsp"><button class="btn btn-default toggle" >车辆列表</button></a></td>
      <td><a href="../login.jsp"><button class="btn btn-default toggle" >安全退出</button></a></td>
      </tr></table>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</div>
</div>

<input type="hidden"  name="longitudevalueGet"  id="longitudevalueGet" value="0," />
<input type="hidden"  name="latitudevalueGet"  id="latitudevalueGet"  value="0," />
<input type="hidden"  name="carIdvalueGet"  id="carIdvalueGet"  value="0," />
<input type="hidden"  name="timevalueGet"  id="timevalueGet"  value="0," />
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }
    
    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        //var point = new BMap.Point(116.467509,40.212677);//定义一个中心点坐标
        var point = new BMap.Point(100.324471,25.589008);//定义一个中心点坐标
        map.centerAndZoom(point,9);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }
    
    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
	var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
	map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
	var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
	map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
	var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
	map.addControl(ctrl_sca);
    }
   
 
  function GetPoint()
  {
  var x=new Array();
  var y=new Array();
  var z=new Array();
  var o=new Array();
  var longitude=$("#longitudevalueGet").val().toString();
  var latitude=$("#latitudevalueGet").val().toString();
  var carIdvalue=$("#carIdvalueGet").val().toString();
  var timevalue=$("#timevalueGet").val().toString();
  var m=longitude.split(",");
  var n=latitude.split(",");
  var c=carIdvalue.split(",");
  var t=timevalue.split(",");
  for (var i=0;i<m.length ;i++ ){ 
  if (m[i]!=" "&&m[i]!=null&&m[i]!="0"&&m[i]!="") {
  x.push(m[i]);
  y.push(n[i]);
  z.push(c[i]);
  o.push(t[i]);
  }; 
} 
  var markerArrs= []; 
   //创建marker
	for (i=0;i<x.length;i++)
	{
		markerArrs[i]={title:z[i],content:o[i],point:x[i]+"|"+y[i],isOpen:0,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}};
	}   
	return markerArrs;
  }
    function addMarker(){
        var markerArr=GetPoint(); 	
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var points = new BMap.Point(p0,p1);  
            j=0;         
			BMap.Convertor.translate(points,0,function(point){
			var iconImg = createIcon(json.icon);
  			var marker = new BMap.Marker(point,{icon:iconImg});
		    var label = new BMap.Label(markerArr[j].title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
		    marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                        borderColor:"#808080",
                        color:"#333",
                        cursor:"pointer"
            });
		    map.setCenter(point);
		    (function(){
				var _iw = createInfoWindow(j++);
				var _marker = marker;
				_marker.addEventListener("click",function(){
				    this.openInfoWindow(_iw);
			    });
			    _iw.addEventListener("open",function(){
				    _marker.getLabel().hide();
			    });
			    _iw.addEventListener("close",function(){
				    _marker.getLabel().show();
			    });
				label.addEventListener("click",function(){
				    _marker.openInfoWindow(_iw);
			    });
				if(!!json.isOpen){
					label.hide();
					_marker.openInfoWindow(_iw);
				}
			})();
             });
        }
    }
    //创建InfoWindow
    function createInfoWindow(i){
       var markerArr=GetPoint(); 
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)});
        return icon;
    }

function allCheck(check,number){
var checkbox=document.getElementsByName("check");
if(check.checked){
for(var i=0;i<checkbox.length;i++){
checkbox[i].checked="checked";
}
change(number);
}else{
for(var i=0;i<checkbox.length;i++){
checkbox[i].checked="";
}
change(number);
}
}


</script>
  <%        UserDao UD = new UserDao();
            GPSInfoDao GD = new GPSInfoDao();
			List<User> user=new ArrayList<User>(); 
			user = UD.getUser();
			AddressDao AD=new AddressDao();
			List<province> province=new ArrayList<province>();
			province=AD.getprovince("1");
			List<city> city=new ArrayList<city>();
			List<county> county=new ArrayList<county>();
			List<String> carId=new ArrayList<String>();
			%>
<div class="row">
<div class="col-md-2" style="overflow:auto;">
<div class=" btn-group-vertical col-md-12" role="group" aria-label="...">
 <div class="btn-group-sm" role="group">
    <ul class="nav nav-pills " role="tablist">
    <input type="checkbox" name="all" onclick="allCheck(this,'<%=GD.getCarNumber()%>')"/><button class="btn btn-default toggle" >全选/取消</button>
          <button id="hide" class="btn btn-default pull-right">
          <span class="glyphicon glyphicon-fullscreen"></span>
          </button>
     </ul>    
  </div>
  <hr>
  <div id="lefttree" class="thumbnail" style="overflow:auto;">
  <ul id="tree">
    <%for (int i=0,o=0;i<province.size();i++){ %>
        <li isexpand="false">
            <span><%=province.get(i).getName() %></span>
            <%city=AD.getcity(province.get(i).getId()); %>
            <ul>
            <%for (int j=0;j<city.size();j++){ %>
                <li isexpand="false">
                    <span><%=city.get(j).getName() %></span>
                     <ul>
                      <%carId=AD.getCarIdByCity(city.get(j).getId());
    for (int k=0;k<carId.size();k++) 
    if (!carId.get(k).equals(" ")&!carId.get(k).equals("")){%>
                        <li><span><input type='checkbox' name='<%="check" %>' id='<%="check"+(o++) %>' value='<%=carId.get(k).toString()%>' onclick="change('<%=GD.getCarNumber()%>')" ><%=carId.get(k) %></span></li>
                        <%} %>
                     </ul>
                 </li>
                  <%} %>
            </ul>
            
        </li> 
       <%} %>
    </ul>
   </div>
</div>

</div>
	<div class=" col-md-10">
    <div class="thumbnail"  id="dituContent"></div> 
	</div>
</div>



	<div class="footer" id="footer">
		<p align="center">Copyright力帆时骏集团 © 2014.All rights reserved.技术支持：<a href="../GPRS_b/about/about.jsp">红土科技创新团队</a></p>
	</div>
</div>
<script type="text/javascript">
function change(e){
 var  carId=""; 
 for (var ii=0;ii<e;ii++)
  if($("#check"+ii).attr("checked")==true){
  var check=$("#check"+ii).val();
  carId+=check+",";
 }
  $.ajax({  
             type: "post",  
             url: "../GPSInfoQueryAction?method=getModuleMark",  
             data:"carId="+carId, 
             success: function(list){
              var longitudevalueSet="";
              var latitudevalueSet="";
              var carIdvalueSet="";
              var timevalueSet="";
              var json = eval("(" + list + ")");
              $.each(json,function(i, vrow){
              $.each(vrow,function(j, test){  
              longitudevalueSet+=test.longitude+",";
              latitudevalueSet+=test.latitude+",";
              carIdvalueSet+=test.carId+",";
              timevalueSet+=test.UTCTime+",";
 });//vrow结束

 $('#longitudevalueGet').val(longitudevalueSet); 
 $('#latitudevalueGet').val(latitudevalueSet);
 $('#carIdvalueGet').val(carIdvalueSet);  
 $('#timevalueGet').val(timevalueSet); 
 initMap();//创建和初始化地图
 });//json结束
}  //函数success结束
}); // ajax结束
}
initMap();
setInterval("initMap()", 1000*60*10);
</script>
<script type="text/javascript">
var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
var hh = h-125;
var hhh = h-200;
dituContenth = document.getElementById("dituContent").style.height = hh + "px";
lefttreeh = document.getElementById("lefttree").style.height = hhh + "px";
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>
</html>
